<template>
  <div class="performance-dashboard">
    <div class="header">
      <h2>应用性能监控</h2>
      <div class="last-updated">最后更新: {{ lastUpdated }}</div>
    </div>

    <div class="metrics-grid">
      <metric-card 
        title="页面加载时间" 
        :value="metrics.pageLoadTime + 'ms'" 
        trend="down"
        :change="15" />
      
      <metric-card 
        title="API响应时间" 
        :value="metrics.apiResponseTime + 'ms'" 
        trend="up"
        :change="8" />
      
      <metric-card 
        title="内存使用" 
        :value="metrics.memoryUsage + 'MB'" 
        trend="stable" />
      
      <metric-card 
        title="FPS" 
        :value="metrics.fps" 
        trend="down"
        :change="5" />
    </div>

    <div class="charts">
      <line-chart :data="performanceHistory" title="性能趋势" />
      <bar-chart :data="resourceUsage" title="资源使用" />
    </div>
  </div>
</template>

<script>
import MetricCard from './MetricCard.vue'
import LineChart from './LineChart.vue'
import BarChart from './BarChart.vue'

export default {
  components: { MetricCard, LineChart, BarChart },
  
  data() {
    return {
      lastUpdated: new Date().toLocaleTimeString(),
      metrics: {
        pageLoadTime: 420,
        apiResponseTime: 150,
        memoryUsage: 85,
        fps: 58
      },
      performanceHistory: [
        { time: '00:00', value: 450 },
        { time: '04:00', value: 420 },
        { time: '08:00', value: 380 },
        { time: '12:00', value: 400 },
        { time: '16:00', value: 390 },
        { time: '20:00', value: 410 }
      ],
      resourceUsage: [
        { name: 'JS', value: 45 },
        { name: 'CSS', value: 15 },
        { name: 'Images', value: 30 },
        { name: 'Fonts', value: 10 }
      ]
    }
  },

  mounted() {
    this.startMonitoring()
  },

  methods: {
    startMonitoring() {
      // 连接性能监控API
      setInterval(() => {
        this.updateMetrics()
      }, 5000)
    },

    updateMetrics() {
      // 模拟数据更新
      this.metrics = {
        pageLoadTime: Math.max(300, Math.floor(Math.random() * 200) + 350),
        apiResponseTime: Math.max(50, Math.floor(Math.random() * 100) + 80),
        memoryUsage: Math.floor(Math.random() * 20) + 75,
        fps: Math.floor(Math.random() * 10) + 55
      }
      this.lastUpdated = new Date().toLocaleTimeString()
    }
  }
}
</script>

<style scoped>
.performance-dashboard {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

h2 {
  color: #2c3e50;
  margin: 0;
}

.last-updated {
  color: #7f8c8d;
  font-size: 0.9em;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 992px) {
  .charts {
    grid-template-columns: 2fr 1fr;
  }
}
</style>